import RoomItem from "@/components/room-item";
import PropTypes from "prop-types";
import React, { memo, useCallback } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { Spin } from "antd";

import { RoomsWrapper } from "./style";
import { useNavigate } from "react-router-dom";
import { changeDetailInfoAction } from "@/store/modules/detail";

const EntireRooms = memo((props) => {
  const { roomList, isLoading, totalCount } = useSelector(
    (state) => ({
      roomList: state.entire.roomList,
      isLoading: state.entire.isLoading,
      totalCount: state.entire.totalCount,
    }),
    shallowEqual
  );

  const navigate = useNavigate();
  const dispatch = useDispatch();
  const itemClickHandle = useCallback(
    (itemDate) => {
      dispatch(changeDetailInfoAction(itemDate));
      navigate("/detail");
    },
    [navigate, dispatch]
  );
  return (
    <RoomsWrapper>
      <Spin spinning={isLoading} tip="加载中...">
        <h2 className="title">{totalCount}多处住所</h2>
        <div className="list">
          {roomList.map((item) => {
            return (
              <RoomItem
                key={item.id}
                itemData={item}
                itemWidth="20%"
                itemClick={itemClickHandle}
              />
            );
          })}
        </div>
      </Spin>
    </RoomsWrapper>
  );
});

EntireRooms.propTypes = {};

export default EntireRooms;
